<template>
  <view class="content">
    <view class="main">
      <view class="card">
        <view class="ticket-info">
          <u-image
            :src="require('@/static/images/movie/' + ticket.imgSrc)"
            width="124rpx"
            height="236rpx"
            border-radius="14rpx"
          ></u-image>
          <view class="detail">
            <view class="movie-name">{{ ticket.movieName }}</view>
            <view class="opera-name">{{ ticket.operaName }}</view>
            <view class="date">{{ ticket.date }} {{ ticket.time }}</view>
            <view class="sets">
              <view class="set-item" v-for="item in ticket.sets" :key="item">
                {{ item }}</view
              >
            </view>
          </view>
        </view>
        <view class="code">
          <text>观看二维码</text>
          <view>
            <u-image
              src="@/static/images/code.png"
              width="380rpx"
              height="380rpx"
            ></u-image>
          </view>
          <text>兑换码</text>
          <text class="code-number">{{ ticket.code }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from '@vue/composition-api';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ticketData = require('@/mock/ticket/index.json');

export default defineComponent({
  onLoad(options) {
    console.log(options);
    this.ticketId = options?.id || '';
  },
  setup() {
    const ticketId = ref('');
    const ticket = computed(() => {
      let result;
      ticketData.tickets.forEach((item: any) => {
        if (item.id === ticketId.value) {
          result = item;
        }
      });
      console.log(result);
      return result;
    });
    return {
      ticketId,
      ticket,
    };
  },
});
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: calc(100vh - 102rpx);
  background-image: url('@/static/images/chooseSeat.png');
  background-size: 100% 100%;
  padding: 40rpx;

  .card {
    width: 100%;
    height: 90%;
    background-image: url('@/static/images/tickets-bg.png');
    background-size: 100% 100%;
    padding: 40rpx;

    .ticket-info {
      height: 236rpx;
      display: flex;
      .detail {
        width: 70%;
        margin-left: 20rpx;

        .movie-name {
          font-size: 32rpx;
          font-weight: 700;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .opera-name,
        .date {
          font-size: 28rpx;
          margin-top: 16rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .sets {
          display: flex;
          margin-top: 16rpx;
          .set-item {
            width: 44rpx;
            height: 44rpx;
            background-color: #4074ff;
            text-align: center;
            line-height: 44rpx;
            border-radius: 8rpx;
            font-size: 24rpx;
            font-weight: 700;
            color: #fff;
            margin: 0;
            margin-right: 18rpx;
          }
        }
      }
    }

    .code {
      width: 100%;
      height: calc(100% - 270rpx);
      margin-top: 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      text {
        display: block;
      }

      .code-number {
        font-size: 32rpx;
        font-weight: 700;
        color: #f3b637;
        letter-spacing: 0.325rem;
      }
    }
  }
}
</style>
